/**
 * 1. 封装一个处理虚拟dom的构造函数
 * 虚拟dom就是一个普通的js对象
 *
 * { tagName: 'ul', props: {class: 'ul-box'}, children: [hello world] }
 *
 */

function CreateElement({ tagName, props, children }) {
  this.tagName = tagName
  this.props = props || {}
  this.children = children || []
}

CreateElement.prototype.render = function () {
  // 1. 创建元素
  let el = document.createElement(this.tagName)

  // 2. 处理添加给这个元素的属性 {key: value} 对象形态
  for (let propName in this.props) {
    let propValue = this.props[propName]
    // 判断propValue如果是对象的话，要接着遍历一次 {} [] function

    if (Object.prototype.toString.call(propValue) === '[object Object]') {
      let arr = []
      for (let key in propValue) {
        // width: 100px  width:'100px' 'border: 1px solid red'
        // style: " width: '100px' "
        // style: "border: 1px..."
        // style: 'border: 2px '
        arr.push(`${key}: ${propValue[key]}`)
        console.log(arr, 'arr')
      }
      el.setAttribute(propName, arr.join(';'))
    } else if (Array.isArray(propValue)) {
      // class: ['box', 'box1']
      el.setAttribute(propName, propValue.join(' '))
    } else if (Object.prototype.toString.call(propValue) === '[object Function]') {
      let clickEvent = ['click', 'scroll', 'mouseUp']
      el.addEventListener('click', propValue)
    } else {
      el.setAttribute(propName, propValue)
    }
  }

  // 3. 处理子元素 children [] 1. 字符串(textNode节点)_-直接添加到el元素的内部就可以了，2. 如果是标签的话，循环

  this.children.forEach((child) => {
    let chidlEl // 这个是一个放在el内部的一个元素节点
    // 判断他是直接渲染的内容还是需要处理的标签

    // 判断引用类型 array: ArrayisArray {}:Object.proptotype.toString.call() function-构造函数 instanceof
    if (child instanceof CreateElement) {
      chidlEl = child.render()
    } else {
      chidlEl = document.createTextNode(child)
    }
    el.appendChild(chidlEl)
  })
  return el
}
